<div class="config-db">

  <div>
    <nz-tabset>
      <nz-tab *ngFor="let tab of tabs" (nzClick)="tabSelected(tab.page)">
        <ng-template #nzTabHeading>
          {{tab.name}}
        </ng-template>
        <div [ngSwitch]="tab.page">
          <div class="config-basic" *ngSwitchCase="1">
            <form nz-form [formGroup]="validateForm">
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>数据源名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
                      <nz-input [(ngModel)]="dbSource.name" formControlName="name" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>所属项目</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('project')">
                      <nz-input [(ngModel)]="dbSource.project" formControlName="project" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>主机名或IP地址</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('address')">
                      <nz-input [(ngModel)]="dbSource.address" formControlName="address" [nzId]="'address'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>端口</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('port')">
                      <nz-input [(ngModel)]="dbSource.port" formControlName="port" [nzId]="'port'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>用户名</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('admin')">
                      <nz-input [(ngModel)]="dbSource.admin" formControlName="admin" [nzId]="'admin'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>密码</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
                      <nz-input [(ngModel)]="dbSource.password" [nzType]="'password'" formControlName="password" [nzId]="'password'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <div class="config-basic" *ngSwitchCase="2">
            <form nz-form [formGroup]="validateForm">
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>数据源名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
                      <nz-input [(ngModel)]="dbSource.name" formControlName="name" [nzId]="'name'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>所属项目</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('project')">
                      <nz-input [(ngModel)]="dbSource.project" formControlName="project" [nzId]="'project'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzSpan]="9">
                  <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                      <label for="email" nz-form-item-required>连接池</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('dataSource')">
                      <nz-input [(ngModel)]="dbSource.dataSource" [nzType]="'textarea'" formControlName="dataSource" [nzId]="'dataSource'" (keyup)="listener()"></nz-input>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>

      </nz-tab>
    </nz-tabset>
  </div>


  <div class="config-operator">
    <div nz-row>
      <div nz-col [nzSpan]="8">
        <div class="config-btn">
          <button [disabled]="isDisabled" (click)="dbSourceOperator(0)" [class.btn-ok]="!isDisabled">连接测试</button>
          <button [disabled]="isDisabled" (click)="dbSourceOperator(1)" [class.btn-ok]="!isDisabled">保 存</button>
        </div>
      </div>
    </div>
  </div>

</div>